<!--表单的单元行-->
<template>
  <template v-if="type===FormMateEnum.field">
    <van-field
        v-model="value"
        v-bind="attrs"
    />
  </template>
  <template v-else-if="type===FormMateEnum.picker">
    <van-field
        :model-value="pickerValue"
        v-bind="attrs"
        @click="datePicker = true"
    />
    <van-popup  v-model:show="datePicker" destroy-on-close position="bottom">
      <van-picker
          v-bind="{...attrs.picker}"
          :model-value="value"
          @confirm="onConfirm"
          @cancel="datePicker = false"
      />
    </van-popup>
  </template>
  <template v-else-if="type===FormMateEnum.datePicker">
    <van-field
        v-model="value"
        v-bind="attrs"
        @click="datePicker = true"
    />
    <van-popup  v-model:show="datePicker" destroy-on-close position="bottom">
      <van-date-picker
          v-bind="{...attrs.picker}"
          :model-value="pickerValue"
          @confirm="onConfirm"
          @cancel="datePicker = false"
      />
    </van-popup>
  </template>
  <template v-else-if="type===FormMateEnum.dateRangePicker">
    <van-field
        v-model="value"
        v-bind="attrs"
        @click="datePicker = true"
    />
    <van-popup  v-model:show="datePicker" destroy-on-close position="bottom">
      <van-picker-group
          title="预约日期"
          :tabs="['开始日期', '结束日期']"
          @confirm="onRangeConfirm"
          @cancel="onCancel"
      >
        <van-date-picker v-model="startDate"  v-bind="{...attrs.picker}"/>
        <van-date-picker v-model="endDate"  v-bind="{...attrs.picker}" />
      </van-picker-group>
    </van-popup>


  </template>
</template>

<script setup>
import {ref, useAttrs,onMounted,watch} from 'vue'
import {showToast} from 'vant'
import {FormMateEnum} from "./type.ts";
const attrs=useAttrs()
const {type}=attrs
//picker
const datePicker=ref(false)
const value=defineModel('value')
//datepicker
const pickerValue = ref([]);
const onConfirm = ({ selectedValues, selectedOptions }) => {
  if(type===FormMateEnum.datePicker){
    pickerValue.value=selectedValues;
    value.value = selectedValues.join('-');
    datePicker.value = false;
  }else if(type===FormMateEnum.picker){
    pickerValue.value=selectedOptions[0]?.text;
    value.value = selectedValues[0];
    datePicker.value = false;
  }

};
//datepicker
//dateRangePicker start
const startDate = ref();
const endDate = ref();
const onRangeConfirm = () => {
  value.value=`${startDate.value.join('-')}~${endDate.value.join('-')}`
  datePicker.value = false;
};
const onCancel = () => {
  showToast('cancel');
};
//dateRangePicker end
//组件数据初始化
watch(datePicker,(newValue)=>{
  if(newValue){
    if(type===FormMateEnum.picker){
      // pickerValue.value=[value.value]
    }else if(type===FormMateEnum.datePicker){
      pickerValue.value=value.value.split('-')
    }else if (type===FormMateEnum.dateRangePicker){
      console.log('重新初始化')
      let arr=value.value?.split('~');
      if(Array.isArray(arr)&&arr.length>0){
        startDate.value=arr[0].split('-')
        endDate.value=arr[1].split('-')
      }

    }
  }

})

</script>

<style scoped lang="scss">

</style>